<!-- 商品列表页 -->
<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-header width="200px">
          <div class="car_head">
            <div class="car_logo">
              <img src="../assets/logo.png"
                   alt="">
            </div>
            <div class="car_search">
              <div class="search">
                <input class="input"
                       placeholder="请输入商品"
                       type="text"
                       style="padding-top:5px"
                       v-model="search" />
                <button>搜索</button>
              </div>
            </div>
          </div>
        </el-header>
        <el-main>
          <div class="about">
            <div class="product-area pb-80">
              <div class="product_card">
                <div class="product_item"
                     v-for="item in arr"
                     :key="item">
                  <el-image class="good_img"
                            :src="item.goodsImgurl"
                            :fit="fit" />
                  <div class="product_tit">{{ item.goodsName }}</div>
                  <div class="product_pri">净含量30g</div>
                  <div class="product_pri">¥ {{ item.goodsPrice }} / 盒</div>
                  <button class="but"
                          @click="testbtn(item)">详细了解</button>
                </div>
              </div>

            </div>
          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>

</template>
<script>
import { set } from 'lodash'

export default {
  name: 'about',
  data() {
    return {
      arr: [
        {
          goodsId: '1',
          goodsName: '桂圆红枣茶',
          goodsNum: 100,
          goodsPrice: 35,
          goodsImgurl: 'https://img1.imgtp.com/2023/06/06/B4UmSaoj.jpg',
        },
      ],
      search: '',
    }
  },
  created() {
    var _this = this
    // 初始化商品列表，默认获取所有商品
    this.$http.get('/getAllGoods').then((success) => {
      console.log(success.data)
      _this.arr = success.data
    })
  },
  methods: {
    testbtn(id) {
      console.log(id)
      this.$router.push({ path: 'detail', query: { userId: id.goodsId } })
    },
  },
  watch: {
    // 搜索框动态更新数据
    search: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`)
        console.log(`旧的值: ${oldVal}`)
        console.log('------------------')
        this.$http
          .get('findByLike', {
            params: {
              name: newVal,
            },
          })
          .then((success) => {
            console.log(success.data)
            this.arr = success.data
          })
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.about {
  margin: 50px;
}
.car_head {
  width: 100%;
  display: flex;
  /* background-color: bisque; */
}
.car_logo {
  width: 30%;
}
.car_search {
  padding-top: 50px;
  margin-right: 5%;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  /* 通过border-radius样式设置搜索框的圆角属性 */
}
.search {
  width: 750px;
  height: 50px;
  background-color: white;
  border-radius: 16px;
  padding: 2px;
  border: 2px rgb(235, 197, 198) solid;
  display: flex;
  justify-content: flex-end;
}
.car_search input {
  margin: 2px;
  padding-left: 20px;
  width: 80%;
  height: 36px;
  border: none;
  outline: none;
  border-radius: 16px;
  font-size: 16px;
}
.car_search button {
  width: 20%;
  /* height: 36px; */
  border-radius: 16px;
  border: none;
  font-weight: 800;
  font-size: 24px;
  background: radial-gradient(rgba(235, 197, 198, 1), rgba(235, 197, 198, 1));
  color: #ffff;
}
.product_card {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between;
}
.product_item {
  padding: 10px;
  width: 25%;
  margin: 50px;

  // background-color: antiquewhite;
  .product_pri {
    font-size: 18px;
    font-weight: 400;
  }
  .product_tit {
    font-size: 24px;
    font-weight: 600;
  }

  .but {
    margin-top: 10px;
    padding: 2px 25px;
    font-size: 14px;
    background-color: transparent;
    border: 1px solid black;
  }
}
.good_img {
  width: 300px;
  height: 300px;
}

.but:hover {
  color: rgb(207, 137, 45);
  border: 1px solid rgb(207, 137, 45);
}
</style>

